<!DOCTYPE html>
<html>
	<head>
		<title>Socket.IO Test</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
		<style>
			body {
				margin: 0;
				padding-bottom: 3rem;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
			}

			#form {
				background: rgba(0, 0, 0, 0.15);
				padding: 0.25rem;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				height: 3rem;
				box-sizing: border-box;
				backdrop-filter: blur(10px);
			}
			#input {
				border: none;
				padding: 0 1rem;
				flex-grow: 1;
				border-radius: 2rem;
				margin: 0.25rem;
			}
			#input:focus {
				outline: none;
			}
			#form > button {
				background: #333;
				border: none;
				padding: 0 1rem;
				margin: 0.25rem;
				border-radius: 3px;
				outline: none;
				color: #fff;
			}

			#messages {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			#messages > li {
				padding: 0.5rem 1rem;
			}
			#messages > li:nth-child(odd) {
				background: #efefef;
			}
		</style>
	</head>
	<body>
    <div id="onlineCount"></div>
		<ul id="messages"></ul>
    
		<form id="form" action="">
      <input id="toUser" />
      <input id="input" autocomplete="off" /><button>Send</button></form>
	</body>
	<script>
		let socketURL = "http://socket.smallwai.com:3000";
		let socket = io(socketURL);
		window.toUser = "";
		let uid = "clientTest";
		// socket连接后以uid登录
		socket.on("connect", function () {
			socket.emit("login", uid);
		});
		socket.on("update_online_count", function (online_stat) {
      $('#onlineCount').html(online_stat)
		});
		socket.on("new_msg", function (msg) {
			console.log("收到消息：" + msg);
		});

		var messages = document.getElementById("messages");
		var form = document.getElementById("form");
		var input = document.getElementById("input");

		form.addEventListener("submit", function (e) {
			e.preventDefault();
			if (input.value) {
				$.ajax({
					url: socketURL + "/sendMsg",
					data: JSON.stringify({ toUser: document.getElementById("toUser").value, data: input.value }), //方法二   测试ok
					method: "post",
					dataType: "json",
					contentType: "application/json",
					success: function (data) {},
				});

				//socket.emit("chat message", input.value);
				//input.value = "";
			}
		});

		socket.on("chat message", function (msg) {
			var item = document.createElement("li");
			item.textContent = msg;
			messages.appendChild(item);
			window.scrollTo(0, document.body.scrollHeight);
		});
	</script>
</html>
